<template>
  <div class="news-detail-page">
    <div class="news-container">
      <!-- 返回按钮 -->
      <div class="back-button">
        <el-button @click="goBack" icon="el-icon-arrow-left">
          返回新闻列表
        </el-button>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="10" animated />
      </div>
      
      <!-- 新闻详情 -->
      <div v-else-if="newsDetail" class="news-detail">
        <div class="news-header">
          <h1 class="news-title">{{ newsDetail.title }}</h1>
          <div class="news-meta">
            <span class="news-category">{{ getCategoryName(newsDetail.category) }}</span>
            <span class="news-author">作者：{{ newsDetail.author }}</span>
          </div>
        </div>
        
        <div class="news-image-container">
          <img :src="newsDetail.image" :alt="newsDetail.title" class="news-image" />
        </div>
        
        <div class="news-content">
          <p class="news-summary">{{ newsDetail.summary }}</p>
          <div class="news-body" v-html="formatContent(newsDetail.content)"></div>
        </div>
        
        <!-- 相关新闻 -->
        <div class="related-news">
          <h3>相关新闻</h3>
          <div class="related-news-list">
            <div
              v-for="related in relatedNews"
              :key="related.id"
              class="related-news-item"
              @click="goToDetail(related.id)"
            >
              <img :src="related.image" :alt="related.title" />
              <div class="related-news-info">
                <h4>{{ related.title }}</h4>
                <p>{{ related.summary }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 404 状态 -->
      <div v-else class="not-found">
        <el-result
          icon="warning"
          title="新闻不存在"
          sub-title="抱歉，您访问的新闻不存在或已被删除"
        >
          <template #extra>
            <el-button type="primary" @click="goBack">返回新闻列表</el-button>
          </template>
        </el-result>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 响应式数据
const newsDetail = ref(null)
const relatedNews = ref([])
const loading = ref(true)

// 模拟新闻数据（与列表页面保持一致）
const mockNewsData = [
  {
    id: 1,
    title: '人工智能技术突破：新型算法提升效率50%',
    summary: '最新研究显示，基于深度学习的AI算法在图像识别任务中取得了重大突破，准确率提升至98.5%，处理速度比传统方法快50%。',
    content: `
      <p>人工智能技术正在快速发展，最新研究显示，基于深度学习的AI算法在图像识别任务中取得了重大突破。这项研究由国际知名AI研究团队完成，经过长达两年的实验和优化，最终实现了令人瞩目的成果。</p>
      
      <h3>技术突破详情</h3>
      <p>新型算法采用了改进的卷积神经网络架构，结合了注意力机制和残差连接，在ImageNet数据集上的准确率达到了98.5%，比传统方法提升了3.2个百分点。同时，算法的处理速度也得到了显著提升，在相同硬件条件下，处理速度比传统方法快50%。</p>
      
      <h3>应用前景</h3>
      <p>这一技术突破将在多个领域产生重要影响：</p>
      <ul>
        <li><strong>医疗诊断：</strong>提高医学影像诊断的准确性和效率</li>
        <li><strong>自动驾驶：</strong>增强车辆对周围环境的感知能力</li>
        <li><strong>安防监控：</strong>提升人脸识别和异常行为检测的精度</li>
        <li><strong>工业质检：</strong>实现更精确的产品质量检测</li>
      </ul>
      
      <h3>未来展望</h3>
      <p>研究团队表示，这只是AI技术发展的一个里程碑，未来将继续探索更先进的算法和架构。预计在接下来的几年内，AI技术将在更多领域实现突破性应用，为人类社会带来更多便利和价值。</p>
    `,
    category: 'tech',
    image: 'https://via.placeholder.com/800x400/4A90E2/FFFFFF?text=AI+Technology+Breakthrough',
    publishDate: '2024-01-15',
    views: 1250,
    author: '张科技'
  },
  {
    id: 2,
    title: '新能源汽车市场持续增长，销量创新高',
    summary: '2024年第一季度，新能源汽车销量同比增长35%，市场份额达到25%，预计全年销量将突破800万辆。',
    content: `
      <p>随着环保意识的提升和政策的支持，新能源汽车市场呈现出强劲的增长势头。根据最新统计数据显示，2024年第一季度，新能源汽车销量同比增长35%，市场份额达到25%，预计全年销量将突破800万辆。</p>
      
      <h3>市场表现分析</h3>
      <p>从细分市场来看，纯电动汽车（BEV）和插电式混合动力汽车（PHEV）都表现出了良好的增长态势。其中，纯电动汽车销量占比达到70%，插电式混合动力汽车占比30%。</p>
      
      <h3>政策支持</h3>
      <p>政府出台的一系列支持政策是推动市场增长的重要因素：</p>
      <ul>
        <li>购置税减免政策延长至2025年</li>
        <li>充电基础设施建设加速推进</li>
        <li>新能源汽车补贴政策优化调整</li>
        <li>绿色金融支持力度加大</li>
      </ul>
      
      <h3>技术发展</h3>
      <p>电池技术的不断进步也是推动市场发展的重要因素。新一代电池技术在能量密度、充电速度和安全性方面都有显著提升，有效缓解了消费者的里程焦虑。</p>
    `,
    category: 'finance',
    image: 'https://via.placeholder.com/800x400/7ED321/FFFFFF?text=EV+Market+Growth',
    publishDate: '2024-01-14',
    views: 980,
    author: '李财经'
  },
  {
    id: 3,
    title: '世界杯预选赛：中国队2:0战胜韩国队',
    summary: '在昨晚进行的世界杯预选赛中，中国队凭借出色的团队配合，以2:0的比分战胜了韩国队，取得重要胜利。',
    content: `
      <p>昨晚的世界杯预选赛吸引了全球数亿观众的目光，中国队展现出了顽强的斗志和出色的技战术水平。经过90分钟的激烈角逐，中国队最终以2:0的比分战胜了实力强劲的韩国队，取得了这场关键比赛的胜利。</p>
      
      <h3>比赛回顾</h3>
      <p>比赛开始后，双方都展现出了强烈的求胜欲望。中国队在主教练的精心布置下，采用了防守反击的战术，成功限制了韩国队的进攻。第35分钟，中国队通过一次快速反击，由前锋球员打入一球，取得领先。</p>
      
      <p>下半场，韩国队加强了进攻，但中国队的防守依然稳固。第78分钟，中国队再次抓住机会，通过角球战术扩大比分优势。最终，中国队将2:0的比分保持到终场。</p>
      
      <h3>球员表现</h3>
      <p>本场比赛中，中国队的整体表现令人满意：</p>
      <ul>
        <li>门将表现出色，多次化解险情</li>
        <li>后卫线配合默契，防守稳固</li>
        <li>中场控制力强，传球准确率高</li>
        <li>前锋把握机会能力强，效率高</li>
      </ul>
      
      <h3>意义重大</h3>
      <p>这场胜利不仅为中国队赢得了宝贵的积分，更重要的是提升了球队的信心和士气。在接下来的预选赛中，中国队将继续努力，争取更好的成绩。</p>
    `,
    category: 'sports',
    image: 'https://via.placeholder.com/800x400/FF6B6B/FFFFFF?text=Football+Victory',
    publishDate: '2024-01-13',
    views: 2100,
    author: '王体育'
  },
  {
    id: 4,
    title: '好莱坞大片《星际穿越2》定档暑期',
    summary: '备受期待的科幻大片《星际穿越2》正式定档2024年7月，将带来更加震撼的视觉效果和扣人心弦的故事情节。',
    content: `
      <p>继前作在全球取得巨大成功后，《星际穿越2》将继续探索宇宙的奥秘。这部备受期待的科幻大片正式定档2024年7月，预计将再次掀起全球观影热潮。</p>
      
      <h3>制作团队</h3>
      <p>《星际穿越2》由著名导演克里斯托弗·诺兰执导，马修·麦康纳、安妮·海瑟薇等原班人马回归，同时加入了新的演员阵容。制作团队表示，续集将在视觉效果和故事情节方面都有重大突破。</p>
      
      <h3>剧情简介</h3>
      <p>续集的故事背景设定在前作事件发生后的20年，人类在宇宙探索方面取得了重大进展。然而，新的威胁正在逼近，主角们必须再次踏上拯救人类的征程。影片将探索更深层的宇宙奥秘和人性思考。</p>
      
      <h3>技术突破</h3>
      <p>在技术方面，《星际穿越2》采用了最新的IMAX摄影技术和CGI特效，将为观众带来前所未有的视觉体验：</p>
      <ul>
        <li>采用IMAX 70mm胶片拍摄</li>
        <li>全新的太空场景设计</li>
        <li>突破性的音效技术</li>
        <li>沉浸式的观影体验</li>
      </ul>
      
      <h3>市场预期</h3>
      <p>业内人士预测，《星际穿越2》有望成为2024年最卖座的电影之一，全球票房预计将超过10亿美元。影片的上映将进一步推动科幻电影市场的发展。</p>
    `,
    category: 'entertainment',
    image: 'https://via.placeholder.com/800x400/9B59B6/FFFFFF?text=Interstellar+2',
    publishDate: '2024-01-12',
    views: 1560,
    author: '陈娱乐'
  },
  {
    id: 5,
    title: '5G技术全面普及，网络速度再创新高',
    summary: '5G网络建设进入快车道，全国5G基站数量突破300万个，平均下载速度达到1.2Gbps。',
    content: `
      <p>随着5G技术的不断成熟和基础设施的完善，用户将享受到更快的网络体验。最新数据显示，全国5G基站数量已突破300万个，5G用户数超过8亿，平均下载速度达到1.2Gbps。</p>
      
      <h3>建设进展</h3>
      <p>5G网络建设已经进入快车道，覆盖范围不断扩大：</p>
      <ul>
        <li>一线城市5G覆盖率超过95%</li>
        <li>二线城市5G覆盖率超过80%</li>
        <li>县城及以上地区基本实现5G覆盖</li>
        <li>农村地区5G覆盖稳步推进</li>
      </ul>
      
      <h3>技术优势</h3>
      <p>5G技术相比4G具有显著优势：</p>
      <ul>
        <li><strong>高速率：</strong>峰值速率可达10Gbps</li>
        <li><strong>低延迟：</strong>端到端延迟低于1ms</li>
        <li><strong>大连接：</strong>每平方公里可连接100万个设备</li>
        <li><strong>高可靠性：</strong>99.999%的可靠性</li>
      </ul>
      
      <h3>应用场景</h3>
      <p>5G技术的普及为多个行业带来了新的发展机遇：</p>
      <ul>
        <li><strong>工业互联网：</strong>智能制造、远程控制</li>
        <li><strong>医疗健康：</strong>远程手术、智慧医疗</li>
        <li><strong>教育娱乐：</strong>VR/AR、在线教育</li>
        <li><strong>交通出行：</strong>自动驾驶、智慧交通</li>
      </ul>
      
      <h3>未来展望</h3>
      <p>预计到2025年，5G网络将实现全面覆盖，6G技术研发也将进入关键阶段。5G技术的广泛应用将为数字经济发展提供强有力的支撑。</p>
    `,
    category: 'tech',
    image: 'https://via.placeholder.com/800x400/3498DB/FFFFFF?text=5G+Network',
    publishDate: '2024-01-11',
    views: 890,
    author: '刘技术'
  },
  {
    id: 6,
    title: '股市大涨：科技股领涨，指数创新高',
    summary: '今日股市表现强劲，科技股板块领涨，主要指数均创下历史新高，投资者信心明显增强。',
    content: `
      <p>在多重利好因素的推动下，今日股市呈现出全面上涨的态势。科技股板块表现尤为突出，带动主要指数创下历史新高，投资者信心明显增强。</p>
      
      <h3>市场表现</h3>
      <p>今日主要指数表现如下：</p>
      <ul>
        <li>上证指数上涨2.5%，收于3500点</li>
        <li>深证成指上涨3.2%，收于14000点</li>
        <li>创业板指上涨4.1%，收于2800点</li>
        <li>科创50指数上涨5.3%，收于1200点</li>
      </ul>
      
      <h3>板块分析</h3>
      <p>从板块表现来看，科技股成为今日市场的领涨板块：</p>
      <ul>
        <li><strong>半导体：</strong>涨幅超过6%，多只个股涨停</li>
        <li><strong>新能源：</strong>涨幅超过5%，持续受到资金追捧</li>
        <li><strong>人工智能：</strong>涨幅超过4%，概念股表现活跃</li>
        <li><strong>医药生物：</strong>涨幅超过3%，创新药企表现突出</li>
      </ul>
      
      <h3>利好因素</h3>
      <p>推动股市上涨的主要因素包括：</p>
      <ul>
        <li>宏观经济数据向好，经济复苏态势明显</li>
        <li>政策面持续释放积极信号</li>
        <li>企业盈利预期改善</li>
        <li>外资持续流入A股市场</li>
      </ul>
      
      <h3>投资建议</h3>
      <p>专家建议投资者：</p>
      <ul>
        <li>关注基本面良好的优质公司</li>
        <li>保持理性投资，避免追高</li>
        <li>分散投资，控制风险</li>
        <li>长期投资，价值投资</li>
      </ul>
    `,
    category: 'finance',
    image: 'https://via.placeholder.com/800x400/F39C12/FFFFFF?text=Stock+Market',
    publishDate: '2024-01-10',
    views: 1340,
    author: '赵投资'
  }
]

// 方法
const getCategoryName = (category) => {
  const categoryMap = {
    tech: '科技',
    finance: '财经',
    sports: '体育',
    entertainment: '娱乐'
  }
  return categoryMap[category] || '其他'
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

const formatContent = (content) => {
  return content
}

const goToDetail = (newsId) => {
  router.push(`/news/${newsId}`)
}

const goBack = () => {
  router.push('/news')
}

const loadNewsDetail = async () => {
  loading.value = true
  
  try {
    const newsId = route.params.id
    // 调用后端数据库API
    const response = await $fetch(`http://localhost:3002/api/news/${newsId}`)
    
    if (response.code === 200) {
      newsDetail.value = response.data.news
      relatedNews.value = response.data.relatedNews
    }
  } catch (error) {
    console.error('加载新闻详情失败:', error)
    // 如果API失败，使用本地数据作为备用
    const newsId = parseInt(route.params.id)
    const news = mockNewsData.find(item => item.id === newsId)
    
    if (news) {
      newsDetail.value = news
      relatedNews.value = mockNewsData
        .filter(item => item.category === news.category && item.id !== news.id)
        .slice(0, 3)
    }
  }
  
  loading.value = false
}

// 生命周期
onMounted(() => {
  loadNewsDetail()
})
</script>

<style scoped>
.news-detail-page {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.news-container {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.back-button {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.loading-container {
  padding: 24px;
}

.news-detail {
  padding: 0;
}

.news-header {
  padding: 24px 24px 0 24px;
}

.news-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #666;
  flex-wrap: wrap;
}

.news-category {
  background: #e6f7ff;
  color: #1890ff;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
}

.news-author {
  color: #999;
}

.news-image-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  padding: 24px;
}

.news-summary {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin: 0 0 24px 0;
  padding: 16px;
  background: #f8f9fa;
  border-left: 4px solid #1890ff;
  border-radius: 4px;
}

.news-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.news-body h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 24px 0 16px 0;
}

.news-body p {
  margin: 0 0 16px 0;
}

.news-body ul {
  margin: 16px 0;
  padding-left: 20px;
}

.news-body li {
  margin: 8px 0;
}

.related-news {
  padding: 24px;
  border-top: 1px solid #f0f0f0;
}

.related-news h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.related-news-list {
  display: grid;
  gap: 16px;
}

.related-news-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.related-news-item:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1);
}

.related-news-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.related-news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.related-news-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.related-news-info p {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.not-found {
  padding: 48px 24px;
}

@media (max-width: 768px) {
  .news-title {
    font-size: 24px;
  }
  
  .news-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .news-image-container {
    height: 250px;
  }
  
  .related-news-item {
    flex-direction: column;
  }
  
  .related-news-item img {
    width: 100%;
    height: 150px;
  }
}
</style> 